<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title></title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAZqks0EkQ_wTvpscAF7EsaRR9YSKsS1L4Gw4EEEaBdly_ttO83RTY0pwfb6wap13yJ2X4WDBe1Ia9Mw" type="text/javascript"></script>
<script src="http://www.google.com/jsapi"></script>

<link rel="stylesheet" href="/static/base.css">
<link rel="stylesheet" href="http://x.myspacecdn.com/modules/activity/static/css/activities.css" type="text/css" />

<script type="text/javascript"> 

    var xhr;
    var map = null;
    var markerManager = null;

    var audioIcon = new GIcon(G_DEFAULT_ICON);
    audioIcon.image = "images/audio.png";
    audioIcon.shadow = null;
    audioIcon.iconSize = new GSize(16, 16);

    var blogIcon = new GIcon(G_DEFAULT_ICON);
    blogIcon.image = "images/blog.png";
    blogIcon.shadow = null;
    blogIcon.iconSize = new GSize(26, 20);

    var eventIcon = new GIcon(G_DEFAULT_ICON);
    eventIcon.image = "images/event.png";
    eventIcon.shadow = null;
    eventIcon.iconSize = new GSize(26, 20);
    
    var genericIcon = new GIcon(G_DEFAULT_ICON);
    genericIcon.image = "images/generic.png";
    genericIcon.shadow = null;
    genericIcon.iconSize = new GSize(20, 20);

    var personIcon = new GIcon(G_DEFAULT_ICON);
    personIcon.image = "images/person.png";
    personIcon.shadow = null;
    personIcon.iconSize = new GSize(24, 24);
    
    var cameraIcon = new GIcon(G_DEFAULT_ICON);
    cameraIcon.image = "images/photo.png";
    cameraIcon.shadow = null;
    cameraIcon.iconSize = new GSize(20, 20);

    var statusIcon = new GIcon(G_DEFAULT_ICON);
    statusIcon.image = "images/status.png";
    statusIcon.shadow = null;
    statusIcon.iconSize = new GSize(20, 20);

    var videoIcon = new GIcon(G_DEFAULT_ICON);
    videoIcon.image = "images/video.png";
    videoIcon.shadow = null;
    videoIcon.iconSize = new GSize(14, 14);
        
    function initialize() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"),
            {mapTypes:[G_SATELLITE_MAP], googleBarOptions:{}});
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(34.885931,-24.785156), 3); 
		
        map.addControl(new GLargeMapControl());
        
        var mgrOptions = {borderPadding:50, maxZoom:17, trackMarkers:true};
        markerManager = new GMarkerManager(map, mgrOptions);

        $("#togglefeedBtn").click(function () { 
            toggleStream();
         });
        
        waitForMsg();        
      }
    }
    google.load("jquery", "1.3.2");
    
    function addActivityToMap(jsonMsg) {
    	var activity = eval('(' + jsonMsg + ')');
    	
        var geopoint = activity.geopoint;
        if (geopoint.length == 0)
            return;

        var coords = geopoint.split(" ");
        var point = new GLatLng(coords[0], coords[1]);

        var marker = new GMarker(point, getActivityIcon(activity));
		
        var markerContent = activity.content;
        GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowTabsHtml(markerContent);
        });

		markerManager.addMarker(marker, 0, 17);
        markerManager.refresh();

    	//addActivityMessage(activity);
        
        var bounds = map.getBounds();
        if (bounds.containsLatLng(point))
            return;
        else
        	map.panTo(point);
    }

	function addActivityMessage(activity){
		$("#messages").show();
		var titleNode = $("<div class='title'>" +  activity.title + "</div>");
		$("#messages").empty();
		$("#messages").append(titleNode);
		$("#messages").fadeOut(1000);
	}
    
    function getActivityIcon(activity) {
        if (activity.type == 'photo')
            return {icon:cameraIcon}
        else if (activity.type == 'note')
            return {icon:statusIcon}
        else if (activity.type == 'person')
            return {icon:personIcon}
        else if (activity.type == 'audio')
            return {icon:audioIcon}
        else if (activity.type == 'video')
            return {icon:videoIcon}
        else if (activity.type == 'event')
            return {icon:eventIcon}
        else if (activity.type == 'blog-entry')
            return {icon:blogIcon}

        return { icon:genericIcon };
    }
    
    function waitForMsg(){
      xhr = $.ajax({
            type: "GET",
            url: "getupdates",

            async: true, /* If set to non-async, browser shows page as "Loading.."*/
            cache: false,
            timeout:30000, /* Timeout in ms */

            success: function(data){ /* called when request to barge.php completes */
                if(data != 'Q_EMPTY')
                	addActivityToMap(data); /* Add response to a .msg div (with the "new" class)*/
                    timerId = setTimeout(
                                'waitForMsg()', /* Request next message */
                                500 /* ..after 1/2 second */
                             );
            },
            maperror: function(XMLHttpRequest, textStatus, errorThrown){
                addActivityToMap(textStatus + " (" + errorThrown + ")");
                setTimeout(
                    'waitForMsg()', /* Try again after.. */
                    "15000"); /* milliseconds (15seconds) */
            },
        });
    };

    function toggleStream() {
    	var pause = "Pause Updates";
    	var resume = "Resume Updates";
    	
    	var curState = $("#togglefeedBtn").text(); 
    	var pos = curState.indexOf(pause);
    	if (pos != -1) {
    		$("#togglefeedBtn").text(resume);
    		pauseStream();
    	}
    	else {
    		$("#togglefeedBtn").text(pause);
    		resumeStream();
    	}
    }
    
    function pauseStream() {
    	clearTimeout(timerId);
    	xhr.abort();
    }
    
    function resumeStream() {
    	waitForMsg();
    }
    
</script>

</head>
<body onload="initialize()" onunload="GUnload()">

	    <div style="height: 25px; width: 100%; border-bottom: solid 2px #000">
	    	<div id="messages" style="font-size:150%; height: 25px; float:left"></div>
	    	<button id="togglefeedBtn" type="button" style="height: 20px; float: right">Pause Updates</button>
	    </div>
	    
	   	<div id="map_canvas" style="width: 100%; height: 100%"; position:relative></div>
</body>
</html>
